<template>
  <div class="app-container">

    
      <el-form ref="formData" :model="formData" :rules="rules" label-position="left" label-width="150px">

    <el-card>

      <el-form-item label="题目类型 " prop="quType">

        <el-select v-model="formData.quType" :disabled="quTypeDisabled" class="filter-item" @change="handleTypeChange">
          <el-option
            v-for="item in quTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

      </el-form-item>

      <el-form-item label="难度等级 " prop="level">

        <el-select v-model="formData.level" class="filter-item">
          <el-option
            v-for="item in levels"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

      </el-form-item>

      <el-form-item label="归属题库" prop="repoIds">

           <el-select multiple v-model="formData.repoIds"  class="filter-item">
              <el-option
              v-for="item in repoList"
              :key="item.value"
              :label="item.title"
              :value="item.id"
              />
        </el-select>


      </el-form-item>

      <el-form-item label="题目内容" prop="content">
           <quill-editor v-model="formData.content" ref="myQuillEditor" style="height: 400px;" :options="editorOption"/>
      </el-form-item>

      <br/><br/><br/><br/><br/><br/>

      <el-form-item label="试题图片">
            <el-upload
            action="http://localhost:8080/qu/upload"
            list-type="picture-card"
            name="head"
            :on-success="uploadSuccess"
           >
            <i class="el-icon-plus"></i>
          </el-upload>
     
      </el-form-item>

      <el-form-item label="整题解析" prop="oriPrice">
        <el-input v-model="formData.analysis" type="textarea" :precision="1" :max="999999" />
      </el-form-item>

    </el-card>

    <div  class="filter-container" style="margin-top: 25px" v-if="formData.quType!=4">

      <el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd">
        添加
      </el-button>

      <el-table
        :data="formData.answers"
        :border="true"
        style="width: 100%;"
      >
        <el-table-column
          label="是否答案"
          width="120"
          align="center"
        >
          <template slot-scope="scope">

            <el-checkbox v-model="scope.row.isRight">答案</el-checkbox>

          </template>

        </el-table-column>

        <el-table-column
         
          label="选项图片"
          width="220px"
          align="center"
        >
          <template slot-scope="scope">

              <el-upload
                :limit="1"
                action="http://localhost:8080/qu/upload"
                list-type="text"
                name="head"
                :on-success="
                (response, file, fileList) => {
                  return uploadSuccess(response, file, fileList, scope.row);
                }
              "
              >
                <i class="el-icon-plus"></i>
              </el-upload>

          </template>
        </el-table-column>

        <el-table-column
          label="答案内容"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.content" type="textarea" />
          </template>
        </el-table-column>

        <el-table-column
          label="答案解析"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.analysis" type="textarea" />
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
          </template>
        </el-table-column>

      </el-table>

    </div>

    <div style="margin-top: 20px">
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button type="info" @click="onCancel">返回</el-button>
    </div>

  </el-form>
  </div>
</template>

<script>
import {findALL} from '@/api/repo'
import {quillEditor} from 'vue-quill-editor'
import {save} from '@/api/qu'
import {insertQu} from '@/api/qu'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {quillEditor},
  data() {
      return {
          editorOption:{},
          quTypes:[
              {value:1,label:"单选题"},
              {value:2,label:"多选题"},
              {value:3,label:"判断题"},
              {value:4,label:"简答题"}
          ],
          levels:[
              {value:1,label:"普通"},
              {value:2,label:"较难"},
          ],

          formData:{
            quType:1,
            level:1,
            repoIds:[],
            content:"",
            image:"",
            answers:[
                       {isRight:0,content:"",image:"",analysis:""},
                       {isRight:0,content:"",image:"",analysis:""},
                       {isRight:0,content:"",image:"",analysis:""},
                       {isRight:0,content:"",image:"",analysis:""},
            ]

          },
          repoList:[],
         
      }
  },
  methods:{
   
     uploadSuccess(response, file, fileList,row){
      console.log(response)
         if(row){
             row.image = response
         }else{
            this.formData.image =  response
         }
     },
      handleAdd(){
          if(this.formData.quType ==1 || this.formData.quType ==2){
            this.formData.answers.push( {isRight:0,content:"",analysis:""})
          }
      },
      removeItem(index){
         
           if(this.formData.quType ==1 || this.formData.quType ==2){
             this.formData.answers.splice(index,1)
          }
      },
      
      submitForm(){

          

           //表单校验


           this.formData.answers.forEach(item=>{
               if(item.isRight ){
                  item.isRight = 1;
               }else{
                 item.isRight = 0;
               }
           })
           insertQu(this.formData).then(res=>{
               //message
               this.$message({
                   type: res.code==0?"success":"error",
                   message:res.msg
               })

               //路由跳转 列表页
           })
      }
  },
  created(){
      //获取所有题库
      findALL().then(res=>{
          this.repoList = res;
      })
  },
  watch:{
      "formData.quType":{
          handler(newVal,oldVal){
              if(newVal == 3){

                  this.formData.answers = [
                       {isRight:0,content:"错误",analysis:""},
                       {isRight:0,content:"正确",analysis:""},
                  ]

              }

              if(newVal == 1 || newVal == 2){

                  this.formData.answers = [
                       {isRight:0,content:"",analysis:""},
                       {isRight:0,content:"",analysis:""},
                       {isRight:0,content:"",analysis:""},
                       {isRight:0,content:"",analysis:""},
                  ]

              }

               if(newVal == 4){
                  this.formData.answers = []
              }



          }
      }
  }

}
</script>